<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const loginTo = () => {
  router.push('/home')
}
</script>

<template>
  <div class="container">
    <div class="bg"></div>
    <div class="login">
      <h1>登录</h1>
      <input type="text" class="user" placeholder="请输入用户名" />
      <input type="password" class="password" placeholder="请输入密码" />
      <button @click="loginTo" class="loginBut">登录</button>
    </div>
  </div>
</template>

<style lang="css" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.bg {
  flex: 1;
  margin: 1.04vw; /* 20px/1920 */
  background-image: url(https://picture.gptkong.com/20250310/19224ba969e38a4559b01b14fdfd7f5b9d.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 1.04vw; /* 20px/1920 */
}
.login {
  width: 40%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.04vw; /* 20px/1920 */
  padding-left: 10%;
}
.user,
.password,
.loginBut {
  height: 1.56vw; /* 30px/1920 */
  width: 15.63vw; /* 300px/1920 */
  box-sizing: border-box;
}
.user,
.password {
  background-color: #fff;
  border: 1px solid #fff;
  padding: 0.52vw; /* 10px/1920 */
}
.user:focus {
  border-color: red !important;
}

@media (max-width: 1024px) {
  .bg {
    margin: 1.95vw; /* 20px/1024 */
    border-radius: 1.95vw; /* 20px/1024 */
  }
  .login {
    gap: 1.04vw; /* 20px/1024 */
    padding-top: 1.95vw;
    padding-bottom: 1.95vw;
  }
  .user,
  .password {
    padding: 0.98vw; /* 10px/1024 */
  }
}

@media (min-width: 2560px) {
  .bg {
    margin: 0.78vw; /* 20px/2560 */
    border-radius: 0.78vw; /* 20px/2560 */
  }
  .login {
    gap: 0.78vw; /* 20px/2560 */
  }
  .user,
  .password,
  .loginBut {
    height: 1.17vw; /* 30px/2560 */
    width: 11.72vw; /* 300px/2560 */
  }
  .user,
  .password {
    padding: 0.39vw; /* 10px/2560 */
  }
}
.loginBut {
  background-color: rgb(64, 158, 255);
  border: #fff;
  font-size: 1.04vw; /* 20px/1920 */
  color: #fff;
}

@media (min-width: 2560px) {
  .loginBut {
    font-size: 0.78vw; /* 20px/2560 */
  }
}
</style>
